<template>
	<view class="content">
		<view class="mainTop">
			<view class="mianTaber" v-for="(item,index) in taberList" :key="item.idso" @click="getTar(index)"
				:class="{'borderBottom':contin==index}">{{item.text}}</view>
		</view>
		<view class="mainCenter" v-if="contin==0">
			<view class="mainCenBox">
				<input type="number" maxlength="11" placeholder="请输入账号" v-model="phoneNumber">
				<view class="mainInp" v-if="codeif==false">
					<input :type="passworif" placeholder="请输入密码" maxlength="28" v-model="password">
					<view class="poerter" style="padding-right: 20rpx;" @click="getshouBox"><text
							v-if="shouBox==false">显示</text><text v-else>隐藏</text></view>
				</view>
				<view class="mainInp" v-else>
					<input type="number" placeholder="请输入验证码" maxlength="15" v-model="codeNumber">
					<view class="poerterii" style="padding-right: 20rpx;">
						<text v-if="shoins==61" @click="generateCode()">获取验证码</text>
						<!-- <text v-else>{{shoins}}重新发送</text> -->
					</view>
				</view>
			</view>
			<view class="mainBtnBox">
				<view class="mainBtn" v-for="(item,index) in btnList" :key="index" @click="getBtnTar(item,index)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="mainCenter" v-if="contin==1">
			<view class="mainCenBox">
				<input type="number" maxlength="11" placeholder="请输入手机号" v-model="phoneNumber">
				<view class="mainInp">
					<input type="number" placeholder="请输入验证码" maxlength="15" v-model="codeNumber">
					<view class="poerterii" style="padding-right: 20rpx;">
						<text v-if="shoins==61" @click="generateCode1()">获取验证码</text>
						<!-- <text v-else>{{shoins}}重新发送</text> -->
					</view>
				</view>
				<view class="mainInp">
					<input :type="passworif" placeholder="请输入密码" maxlength="28" ref="password">
					<view class="poerter" style="padding-right: 20rpx;" @click="getshouBox"><text
							v-if="shouBox==false">显示</text><text v-else>隐藏</text></view>
				</view>
			</view>
			<view class="mainBtnBox zuche">
				<view class="mainBtn" @click="getresist">立即注册</view>
			</view>
		</view>
		<view class="iconifbt" v-if="contin==0">
			<view class="log_luit">
				<checkbox-group @change="checkboxChange">
					<checkbox color="#999" :checked="checkedif" />
					勾选即表示同意<text @click="tourl('/pages/xieyi/xieyi?type=2')">《用户协议》</text>及<text
						@click="tourl('/pages/xieyi/xieyi?type=1')">《隐私政策》</text>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	import * as LoginApi from '@/api/login/index.js'
	import * as request from '@/api/request.js'
	import {
		apiUrl
	} from '@/config/config.js';

	export default {
		data() {
			return {
				taberList: [{
						text: '登录',
						idso: 1
					},
					{
						text: '注册',
						idso: 2
					}
				],
				contin: 0,
				btnList: ['密码登录', '验证码登录'],
				btnListyi: ['密码登录', '验证码登录'],
				btnListya: ['验证码登录', '密码登录'],
				checkedif: false,
				shouBox: false,
				shoins: 61,
				passworif: 'password',
				codeif: false,
				phoneNumber: '',
				password: '',
				codeNumber: '',
				apiUrl: apiUrl,
			}
		},
		onLoad(per) {
			// console.log(per, 222222222);
		},
		methods: {
			generateCode() {
				uni.request({
					url: this.apiUrl + '/api/user/generateCode',
					data: {
						account: this.phoneNumber
					},
					method: 'GET',
					success: (res) => {
						console.log(res.data.msg)
					}
				})
			},
			generateCode1() {
				uni.request({
					url: this.apiUrl + '/api/user/generateCode1',
					data: {
						account: this.phoneNumber
					},
					method: 'GET',
					success: (res) => {
						console.log(res.data.msg)
					}
				})
			},
			checkboxChange(e) {
				this.checkedif = !this.checkedif
			},
			getTar(e) {
				this.contin = e
			},
			getresist() {
				uni.request({
					url: this.apiUrl + '/api/user/register',
					data: {
						account: this.phoneNumber,
						mobile: this.phoneNumber,
						password: this.password,
						
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == '200') {
							uni.setStorage({
								key: 'islogin_key',
								data: true,
							});
							uni.setStorage({
								key: 'account_key',
								data: this.phoneNumber,
							});
							uni.showModal({
								content: '注册成功',
							});
							wx.switchTab({
								url: '/pages/mine/index' // 替换成您要跳转的 TabBar 页面路径
							});
						} else {
							uni.showModal({
								content: '注册失败！',
								success(res) {}
							})
						}
					}
				})
			},
			loginUser(data) {
				uni.request({
					url: this.apiUrl + '/api/user/login',
					data: data,
					method: 'POST',
					success: (res) => {
						console.log(res.data);
						if (res.data.code == '200') {
							uni.setStorage({
								key: 'islogin_key',
								data: true,
							});
							uni.setStorage({
								key: 'account_key',
								data: this.phoneNumber,
							});
							uni.showModal({
								content: '登录成功',
							});
							wx.switchTab({
								url: '/pages/mine/index' // 替换成您要跳转的 TabBar 页面路径
							});
						} else {
							uni.showModal({
								content: '登录失败！账号或密码错误',
								success(res) {}
							})
						}
					}
				})

			},
			getBtnTar(e, i) {
				// console.log(this.$refs.password.valueSync,33333333333);
				if (e == '密码登录') {
					this.btnList = this.btnListyi
					this.codeif = false
				} else if (e == '验证码登录') {
					this.codeif = true
					this.btnList = this.btnListya
				}
				if (e == '密码登录' & i == 0) {

					let data = {
						account: this.phoneNumber,
						// password: this.$refs.password.valueSync,
						password: this.password
					}
					this.loginUser(data);
					// this.$emit('passwordLogin', data)
				} else if (e == '验证码登录' & i == 0) {
					let data = {
						account: this.phoneNumber,
						code: this.codeNumber,
					}
					this.codeLogin(data);
				}
			},
			codeLogin(data) {
				uni.request({
					url: this.apiUrl + '/api/user/codeLogin',
					data: data,
					method: 'GET',
					success: (res) => {
						console.log(res.data);
						if (res.data.code == '200') {
							uni.setStorage({
								key: 'islogin_key',
								data: true,
							});
							uni.setStorage({
								key: 'account_key',
								data: this.phoneNumber,
							});
							uni.showModal({
								content: '登录成功',
							});
							wx.switchTab({
								url: '/pages/mine/index' // 替换成您要跳转的 TabBar 页面路径
							});
						} else {
							uni.showModal({
								content: '登录失败！账号或验证码错误',
								success(res) {}
							})
						}
					}
				})
			},
			tourl(e) {
				uni.navigateTo({
					url: e
				})
			},
			getshouBox() {
				this.shouBox = !this.shouBox
				if (this.shouBox == false) {
					this.passworif = "password"
				} else {
					this.passworif = "text"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes yes {
		0% {
			opacity: 0;
			bottom: -200rpx;
		}

		50% {
			opacity: .5;
		}

		100% {
			opacity: 1;
			bottom: 0;
		}
	}

	.content {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 98%;
		/* 自定义宽度 */
		height: 60vh;
		/* 自定义高度，这里使用视窗高度的80%作为示例 */
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		animation: yes .5s linear;
		/* 自定义动画样式 */

		.mainTop {
			display: flex;
			align-items: center;
			justify-content: space-around;

			.mianTaber {
				padding: 20rpx;
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #444;
				font-weight: bold;
				font-size: 34rpx;
				padding-bottom: 10rpx;
			}

			.borderBottom {
				color: #27ba9b;
				transition: all 1s linear;

				&:before {
					content: '';
					width: 20rpx;
					height: 20rpx;
					margin-right: 15rpx;
					border-bottom: 6rpx solid #27ba9b;
					border-right: 6rpx solid #27ba9b;
					transform: rotate(-45deg);
				}

				&:after {
					content: '';
					width: 20rpx;
					height: 20rpx;
					margin-left: 15rpx;
					border-bottom: 6rpx solid #27ba9b;
					border-left: 6rpx solid #27ba9b;
					transform: rotate(45deg);
				}
			}
		}

		.mainCenter {
			padding-top: 20rpx;

			.mainCenBox {
				input {
					width: 75%;
					margin: auto;
					border: solid 1rpx #999;
					margin-top: 40rpx;
					padding: 20rpx 30rpx;
					border-radius: 20rpx;
				}

				.mainInp {
					position: relative;

					.poerterii {
						position: absolute;
						top: 50%;
						right: -20rpx;
						transform: translate(-50%, -50%);
						color: #27ba9b;
					}

					.poerter {
						position: absolute;
						top: 50%;
						right: 30rpx;
						transform: translate(-50%, -50%);

						text {
							color: #999;
						}

						.mr {
							padding-right: 30rpx !important;
						}
					}
				}
			}

			.zuche {
				.mainBtn {
					color: #fff !important;
					background-color: #27ba9b !important;
					margin-bottom: 100rpx !important;
				}
			}

			.mainBtnBox {
				padding-top: 60rpx;

				.mainBtn {
					margin: auto;
					width: 75%;
					text-align: center;
					padding: 30rpx;
					border-radius: 30rpx;
					margin-bottom: 20rpx;
					border: #27ba9b solid 3rpx;
					background-color: #27ba9b;
					font-size: 34rpx;
					color: #fff;

					&:nth-last-child(1) {
						color: #333;
						background-color: transparent;
					}
				}
			}
		}

		.iconifbt {
			padding: 55rpx 0 30rpx;

			.log_luit {
				font-size: 30rpx;

				text {
					color: #27ba9b;
				}
			}
		}
	}
</style>